<template>
	<view>
		<!-- 顶部导航栏 -->
		<cu-custom bgColor="bg-gradual-green">
			<block slot="content">青少年兴趣课管理系统</block>
		</cu-custom>

		<!-- 导航栏 -->
		<scroll-view scroll-x class="bg-white nav" scroll-with-animation :scroll-left="scrollLeft">
			<view class="cu-item" :class="index==TabCur?'text-green cur':''" v-for="(item, index) in classify"
				:key="index" @tap="tabSelect" :data-id="index" style="width: 200rpx;text-align: center;">
				{{item}}
			</view>
		</scroll-view>
		<!-- 中部课程渲染区域 -->
		<scroll-view scroll-y :scroll-top="scrollTop"
			refresher-enabled :refresher-triggered="isRefresh"
			style="height: calc(100vh - 330rpx);"
			@scrolltolower="handleScrollBottom"
			@refresherrefresh="handleRefresh">
			<!-- 课程列表 -->
			<course-item :course="item" v-for="(item, index) in list" :key="index"></course-item>
			<!-- 加载更多 -->
			<view v-show="isShowLoadMore" class="cu-load text-lg" :class="isLoad?'loading':'over'"></view>
		</scroll-view>
		<view class="content">

		</view>

		<!-- 加载弹窗 -->
		<view class="cu-load load-modal" v-if="loadModal">
			<image src="@/static/logo.jpg" mode="aspectFit"></image>
			<view class="gray-text">加载中...</view>
		</view>
	</view>
</template>

<script>
	import CourseItem from '@/components/course-item/course-item.vue'
	import {
		getCourseType,
		getCourseListByType
	} from '@/api/course.js'

	export default {
		components: {
			CourseItem
		},
		data() {
			return {
				TabCur: 0,
				scrollLeft: 0,
				scrollTop: 38,
				classify: [],
				list: [],
				// 加载更多弹窗
				loadModal: true,
				// 显示课程加载更多
				isShowLoadMore: false,
				// 课程加载更多
				isLoad: true,
				currentClassify: '精选',
				queryData: {
					key: '',
					current: 1,
					size: 10
				},
				// 下拉刷新控制
				isRefresh: false
			}
		},
		created() {
			this.getClassifyList()
			this.getList()
		},
		methods: {
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 200
				this.currentClassify = this.classify[this.TabCur]
				// 重置课程列表、查询参数
				this.list = []
				this.queryData.current = 1
				this.isShowLoadMore = true
				this.isLoad = true
				this.getList()
			},
			// 获取课程分类列表
			getClassifyList() {
				getCourseType().then(res => {
					this.classify = res.data
					this.classify.unshift('精选')
					this.loadModal = false;
					this.isShowLoadMorev = true
					this.isLoad = true
				})
			},
			// 获取课程列表
			getList() {
				this.queryData.key = this.currentClassify === '精选' ? '' : this.currentClassify
				getCourseListByType(this.queryData).then(res => {
					if (res.data.total > 0) {
						this.list = this.list.concat(res.data.records)
						// 关闭底部加载更多
						this.isShowLoadMore = false
						// 关闭下拉加载更多
						this.isRefresh = false
					} else {
						this.isLoad = false
						// 关闭下拉加载更多
						this.isRefresh = false
					}
				}).catch(err => {
					this.isLoad = false
					// 关闭下拉加载更多
					this.isRefresh = false
				})
			},
			// 滑到底部处理函数
			handleScrollBottom() {
				if (!this.isShowLoadMore) {
					this.isShowLoadMore = true
					this.isLoad = true
					this.queryData.current++
					this.getList()
				}
			},
			// 自定义下拉刷新事件
			handleRefresh() {
				// 手动开启下拉刷新状态
				this.isRefresh = true
				// 重置课程列表
				this.list = []
				this.queryData.current = 1
				this.getList()
			}
		}
	}
</script>

<style>

</style>
